<template>
  <!-- 修改用户名,邮箱,备注 -->
  <custom-modal
    width="500px"
    :visible="visible"
    :title="$t('modifyInfo')"
    :destroyOnClose="true"
    :maskClosable="false"
    :suring="loading"
    @ok="handleSubmit"
    @cancel="resetData"
  >
    <a-form-model
      ref="formComp"
      :model="formData"
      :rules="rules"
      layout="horizontal"
      class="AsteriskAfter newEditStyle"
      style="min-height:160px;"
    >
      <a-row :gutter="20">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('systemLang')" prop="lang">
            <a-select v-model="formData.lang" allow-clear>
              <a-select-option v-for="item in langs" :key="item.value" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </custom-modal>
</template>
<script>
import CustomModal from '@/components/CustomModal/index.vue'
import Vue from 'vue'
export default {
  inject: ['reload'],
  components: {
    CustomModal
  },
  props: {

  },
  data () {
    const _this = this
    return {
      visible: false,
      loading: false,
      langs: [{
        name: _this.$t('zhLang'),
        value: 'zh'
      }, {
        name: _this.$t('enLang'),
        value: 'en'
      }],
      formData: {
        lang: this.$store.state.app.local || Vue.ls.get('locale') || 'zh'
      },
      rules: {
        lang: [
          { required: true, message: this.$t('pleaseInput') }
        ]
      }
    }
  },
  methods: {
    handleSubmit () {
      const vm = this
      vm.$refs.formComp.validate(valid => {
        if (valid) {
          const { $store } = this
          $store.commit('SET_LANG', this.formData.lang)
          this.$message.success(this.$t('successfullyOperation'))
          this.$nextTick(() => {
            this.resetData()
            this.reload()
          })
        }
      })
    },
    resetData () {
      this.formData.lang = this.$store.state.app.local || Vue.ls.get('locale') || 'zhCN'
      this.visible = false
    },
    switchVisible (val) {
      this.visible = val
    }
  }
}
</script>
